<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <style>
        .button-sp-area {
            padding: 0 15px;
        }

        .button-sp-area a {
            margin-left: 9px;
        }

        .weui-media-box__thumb {
            width: 65px;
            height: 65px;
        }

        .into_order {
            position: absolute;
            bottom: 15px;
            right: 10px;
        }

        .into_star {
            position: absolute;
            top: 15px;
            right: 10px;
        }

        .weui-media-box {
            padding-top: 25px;
            padding-bottom: 24px;
        }
        .weui-tabbar{
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 53px;
        }
    </style>
    <title>商品订购</title>
</head>

<body>
    <div class="goods_">
        <!-- toast组件 -->
        <div id="toast" style="display: none;">
            <div class="weui-mask_transparent"></div>
            <div class="weui-toast">
                <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                <p class="weui-toast__content"></p>
            </div>
        </div>
        <!-- 搜索框组件 -->
        <div class="weui-search-bar" id="search_bar">
            <form class="weui-search-bar__form">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="search_input" placeholder="搜索" />
                    <a href="javascript:" class="weui-icon-clear" id="search_clear"></a>
                </div>
                <label for="search_input" class="weui-search-bar__label" id="search_text">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
            </form>
            <a href="javascript:" class="weui-search-bar__cancel-btn" id="search_cancel">取消</a>
        </div>

        <!-- 类别选择组件 -->
        <div class="button-sp-area">
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" key='0' id="all">全部</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" key='1'>烟草</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" key='2'>酒水</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" key='3'>饮料</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" key='4'>零食</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" key='5'>粮油</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" key='6'>日常</a>
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" key='7'>其他</a>
        </div>
        <!-- 物品列表组件 -->
        <div class="weui-panel__bd">
            <span href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd">
                    <img class="weui-media-box__thumb" src="https://tse1-mm.cn.bing.net/th?id=OIP.vUE-ZA8cvtMwtqndfoha2AHaEl&w=164&h=105&c=8&rs=1&qlt=90&pid=3.1&rm=2"
                        alt="">
                </div>
                <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title">硬中华</h4>
                    <p class="weui-media-box__desc">里面有10包</p>
                    <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary into_order">加入订单</a>
                </div>
            </span>
            <span href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd">
                    <img class="weui-media-box__thumb" src="https://tse1-mm.cn.bing.net/th?id=OIP.vUE-ZA8cvtMwtqndfoha2AHaEl&w=164&h=105&c=8&rs=1&qlt=90&pid=3.1&rm=2"
                        alt="">
                </div>
                <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title">硬中华</h4>
                    <p class="weui-media-box__desc">里面有10包</p>
                    <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary into_order">加入订单</a>
                </div>
            </span>
            <span href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd">
                    <img class="weui-media-box__thumb" src="https://tse1-mm.cn.bing.net/th?id=OIP.vUE-ZA8cvtMwtqndfoha2AHaEl&w=164&h=105&c=8&rs=1&qlt=90&pid=3.1&rm=2"
                        alt="">
                </div>
                <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title">硬中华</h4>
                    <p class="weui-media-box__desc">里面有10包</p>
                    <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary into_order">加入订单</a>
                </div>
            </span>
        </div>
        <!-- 加载更多 -->
        <div class="weui-loadmore">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
        </div>
        <div class="weui-loadmore weui-loadmore_line">
            <span class="weui-loadmore__tips">暂无数据</span>
        </div>

        <div id="footer"></div>
    </div>


</body>
<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<script>
    var goods_type = ['0']
    var goods_type_str = '0'
    
    $('#footer').load('../directive/footer.html', function () {
        $('#footer').find('a').eq(0).addClass('weui-bar__item_on')
        $('#footer .weui-bar__item_on img').attr('src', $('#footer .weui-bar__item_on img').attr('src').split('.svg')[0] + '_.svg')
    })

    $('#search_text').on('click', function () {
        $('.weui-search-bar').addClass('weui-search-bar_focusing')
    })

    $('#search_cancel').on('click', function () {
        $('.weui-search-bar').removeClass('weui-search-bar_focusing')
    })

    $('#search_clear').on('click', function () {
        $('#search_input').val('')
    })
    $('.into_order').on('click', function () {
        $('#toast .weui-toast__content').html('加入订单成功，可在订单中设定数量')
        $('#toast').show()
        $('#toast').css('opacity', 1)
        setTimeout(function () {
            $('#toast').hide()
        }, 1000);
    })
    $('.button-sp-area a').on('click', function () {
        if ($(this).attr('key') === '0') {
            goods_type = ['0']
            goods_type_str = '0'
            $('#all').removeClass('weui-btn_default').addClass('weui-btn_primary')
            $('#all').siblings().addClass('weui-btn_default').removeClass('weui-btn_primary')
            return
        }
        var key = $(this).attr('key')
        var index = goods_type.indexOf(key)
        if ($(this).hasClass('weui-btn_default')) {
            goods_type.push(key)
            $(this).removeClass('weui-btn_default').addClass('weui-btn_primary')
        } else {
            goods_type.splice(index, 1)
            $(this).addClass('weui-btn_default').removeClass('weui-btn_primary')
        }

        goods_type_str = goods_type.join(',')
        if (goods_type.length) {
            $('#all').addClass('weui-btn_default').removeClass('weui-btn_primary')
        } else {
            $('#all').removeClass('weui-btn_default').addClass('weui-btn_primary')
        }
    })

</script>

</html>